<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>

<link href="/boot/css/bootstrap.css" rel="stylesheet">
<link href="/boot/plugins/revolution/css/settings.css" rel="stylesheet" type="text/css"><!-- REVOLUTION SETTINGS STYLES -->
<link href="/boot/plugins/revolution/css/layers.css" rel="stylesheet" type="text/css"><!-- REVOLUTION LAYERS STYLES -->
<link href="/boot/plugins/revolution/css/navigation.css" rel="stylesheet" type="text/css"><!-- REVOLUTION NAVIGATION STYLES -->
<link href="/boot/css/style.css" rel="stylesheet">
<link href="/boot/css/responsive.css" rel="stylesheet">


<link rel="shortcut icon" href="/boot/images/favicon.png" type="image/x-icon">
<link rel="icon" href="/boot/images/favicon.png" type="image/x-icon">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>

<body>


<jsp:include page="nav.jsp" flush="true"></jsp:include>
    <section class="main-slider">
        <div class="rev_slider_wrapper fullwidthbanner-container"  id="rev_slider_one_wrapper" data-source="gallery">
            <div class="rev_slider fullwidthabanner" id="rev_slider_one" data-version="5.4.1">
                <ul>
                    <li data-description="Slide Description" data-easein="default" data-easeout="default" data-fsmasterspeed="1500" data-fsslotamount="7" data-fstransition="fade" data-hideafterloop="0" data-hideslideonmobile="off" data-index="rs-1687" data-masterspeed="default" data-param1="" data-param10="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-rotate="0" data-saveperformance="off" data-slotamount="default" data-thumb="/boot/images/main-slider/image-1.jpg" data-title="Slide Title" data-transition="parallaxvertical">
                    <img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="/boot/images/main-slider/image-1.jpg">
                    <div class="tp-caption" 
                    data-paddingbottom="[0,0,0,0]"
                    data-paddingleft="[0,0,0,0]"
                    data-paddingright="[0,0,0,0]"
                    data-paddingtop="[0,0,0,0]"
                    data-responsive_offset="on"
                    data-type="text"
                    data-height="none"
                    data-width="['600','600','500','420']"
                    data-whitespace="normal"
                    data-hoffset="['15','15','15','15']"
                    data-voffset="['-20','-20','-20','-20']"
                    data-x="['right','right','right','right']"
                    data-y="['middle','middle','middle','middle']"
                    data-textalign="['top','top','top','top']"
                    data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'>
                    	<div class="slider-content">
                        	<h2>找到你的心仪之车 <br> 与汽车世界!.</h2>
                            <a href="#" class="theme-btn btn-style-one">我要买车</a>
                        </div>
                    </div>
                    </li>
                    <li data-description="Slide Description" data-easein="default" data-easeout="default" data-fsmasterspeed="1500" data-fsslotamount="7" data-fstransition="fade" data-hideafterloop="0" data-hideslideonmobile="off" data-index="rs-1688" data-masterspeed="default" data-param1="" data-param10="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-rotate="0" data-saveperformance="off" data-slotamount="default" data-thumb="/boot/images/main-slider/image-2.jpg" data-title="Slide Title" data-transition="parallaxvertical">
                    <img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="/boot/images/main-slider/image-2.jpg"> 
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <!--热门汽车-->
    <section class="popular-cars-section">
    	<div class="auto-container">
    		<div class="sec-title">
            	<h2>热门汽车</h2>
            </div>
           <c:forEach items="${pageInfo.list}" var="p">
            <div class="container" style="text-align: center">

            	<!--汽车模块-->
                <div class="car-block col-lg-3 col-md-4 col-sm-6 col-xs-12">
                	<div class="inner-box">
                    	<div class="image">
<%--                        	<a href="inventory-single.html">--%>
<%--                                <img src="/boot/images/resource/car-1.png" alt="" />--%>
                                <img src="http://localhost:80/car/${p.cPhoto}">
<%--                            </a>--%>
                            <div class="price">
                                ￥${p.cPrice}万
                            </div>
                        </div>
                        <h3>
                            <c:forEach items="${carBrands}" var="b">
                                <c:if test="${p.brId == b.id}">${b.brName}</c:if>
                            </c:forEach>
                            <c:forEach items="${carStyles}" var="s">
                                    <c:if test="${p.stId == s.id}">${s.stName}</c:if>
                            </c:forEach>

                            <span onclick="detailz(${p.id})">${p.cGear}</span>

                            <c:if test="${uname!=null}">
                           <span class="glyphicon glyphicon-shopping-cart" onclick="addCarts(${p.id})" ></span>&nbsp;
                            </c:if>
<%--                            <span class="glyphicon glyphicon-thumbs-up like " onclick="like(${p.id},${p.likes},$(this))">--%>

<%--                                <span class="glyphicon glyphicon-heart"><a href="/boot/user/commit">购买</a></span></p>--%>

<%--                               </span>--%>


                            </span></h3>



                        <div class="lower-box">
                        	<ul class="car-info">
                            	<li><span class="fa fa-road icon"></span>${p.cSeat}座</li>
                                <li><span class="icon fa fa-car"></span>${p.cCus}</li>
                                <li><span class="icon fa fa-clock-o"></span>

                                    <fmt:formatDate value="${p.cCreatedate}" pattern="yyyy-MM-dd "/>&nbsp;&nbsp;
                                    <c:if test="${uname!=null}">

                                    <span class="glyphicon glyphicon-thumbs-up like " onclick="like(${p.id},${p.likes},$(this))">
                                   <input type="text" id="likes" value="${p.likes}" style="width: 20px ;background-color: #f7f7f7;color: #666666" >
                               </span>
                                </c:if>


                                </li>
                            </ul>
                        </div>
                </div>
            </div>
            </c:forEach>
        </div>
    </section>

    <div class="container" style="text-align: center">
        <ul class="pagination">
            <c:if test="${pageInfo.pageNum>1}">
                <li><a href="javascript:nextPage(${pageInfo.pageNum-1})">&laquo;</a></li>
            </c:if>

            <c:if test="${pageInfo.pageNum<=1}">
                <li class="disabled"><a>&laquo;</a></li>
            </c:if>

            <c:set var="start" value="${pageInfo.pageNum}"></c:set>
            <c:if test="${pageInfo.pageNum+2<=pageInfo.pages}">
                <c:set var="end" value="${pageInfo.pageNum+2}"></c:set>
            </c:if>

            <c:if test="${pageInfo.pageNum+2>pageInfo.pages}">
                <c:set var="start" value="${pageInfo.pages-2}"></c:set>
                <c:set var="end" value="${pageInfo.pages}"></c:set>
            </c:if>

            <c:forEach begin="${start<=0?1:start}" end="${end}" var="n">
                <c:if test="${pageInfo.pageNum==n}">
                    <li class="active"><a href="javascript:nextPage(${n})">${n}</a></li>
                </c:if>
                <c:if test="${pageInfo.pageNum!=n}">
                    <li><a href="javascript:nextPage(${n})">${n}</a></li>
                </c:if>
            </c:forEach>

            <c:if test="${pageInfo.pageNum<pageInfo.pages}">
                <li><a href="javascript:nextPage(${pageInfo.pageNum+1})">&raquo;</a></li>
            </c:if>

            <c:if test="${pageInfo.pageNum>=pageInfo.pages}">
                <li class="disabled"><a>&raquo;</a></li>
            </c:if>

            <li><a>当前页${pageInfo.pageNum}/${pageInfo.pages}总页</a></li>
        </ul>
    </div>

    <section class="counter-section" style="background-image:url(/boot/images/background/1.jpg);">
    	<div class="auto-container">
            <div class="fact-counter">
                <div class="row clearfix">
                    <div class="column counter-column col-md-3 col-sm-6 col-xs-12">
                        <div class="inner">
                        	<div class="content">
                                <div class="count-outer count-box">
                                	<div class="icon-box"><span class="icon flaticon-transport-1"></span></div>
                                    <span class="count-text" data-speed="2500" data-stop="1724">0</span>
                                </div>
                                <h4 class="counter-title">完成的订单数</h4>
                            </div>
                        </div>
                    </div>

                    <div class="column counter-column col-md-3 col-sm-6 col-xs-12">
                        <div class="inner">
                        	<div class="content">
                                <div class="count-outer count-box">
                                	<div class="icon-box"><span class="icon flaticon-good-mood-emoticon"></span></div>
                                    <span class="count-text" data-speed="3000" data-stop="3685">0</span>
                                </div>
                                <h4 class="counter-title">满意的用户</h4>
                            </div>
                        </div>
                    </div>

                    <div class="column counter-column col-md-3 col-sm-6 col-xs-12">
                        <div class="inner">
                        	<div class="content">
                                <div class="count-outer count-box">
                                	<div class="icon-box"><span class="icon flaticon-black"></span></div>
                                    <span class="count-text" data-speed="3000" data-stop="295">0</span>+
                                </div>
                                <h4 class="counter-title">顾客的人数</h4>
                            </div>
                        </div>
                    </div>

                    <div class="column counter-column col-md-3 col-sm-6 col-xs-12">
                        <div class="inner">
                        	<div class="content">
                                <div class="count-outer count-box">
                                	<div class="icon-box"><span class="icon flaticon-interface-1"></span></div>
                                    <span class="count-text" data-speed="3000" data-stop="7">0</span>
                                </div>
                                <h4 class="counter-title">认证</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </section>

    <section class="services-section" style="background-image:url(/boot/images/background/2.jpg);">
    	<div class="auto-container">
        	<div class="row clearfix">
                <div class="services-block col-md-6 col-sm-6 col-xs-12">
                	<div class="inner-box">
                    	<div class="upper-box" style="background-image:url(/boot/images/resource/service-1.jpg);">
                        	<div class="upper-content">
                            	<div class="icon-box">
                                	<span class="icon flaticon-buy-a-car"></span>
                                </div>
                                <h2><a href="inventory-single.html">你想卖车吗？</a></h2>
                                <div class="text">如果你想迅速卖掉你的车，我们会帮助你的。你的车有100%合理的价格。</div>
                            </div>
                        </div>
                        <div class="lower-content">
                            <ul>
                                <li><span class="icon flaticon-users"></span>汽车售后与保险 <br> 买家</li>
                                <li><span class="icon flaticon-speedometer"></span>快速和简单的汽车销售
                                    过程。<br>过程</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="services-block col-md-6 col-sm-6 col-xs-12">
                	<div class="inner-box">
                    	<div class="upper-box" style="background-image:url(/boot/images/resource/service-1.jpg);">
                        	<div class="upper-content">
                            	<div class="icon-box">
                                	<span class="icon flaticon-transport"></span>
                                </div>
                                <h2><a href="inventory-single.html">汽车售后与保险</a></h2>
                                <div class="text">如果你想迅速卖掉你的车，我们会帮助你的。你的车有100%合理的价格。</div>
                            </div>
                        </div>
                        <div class="lower-content">
                            <ul>
                                <li><span class="icon flaticon-accounting"></span>立即申请个性化财务
                                    报价。 <br> 财务报价</li>
                                <li><span class="icon flaticon-car-washing"></span>节省高达140美元的汽车
                                    保险。 <br> 保险</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>
   
    
    <!--最新比较-->
    <section class="comparison-section">
    	<div class="auto-container">
            <div class="sec-title clearfix">
            	<h2>最新比较</h2>
                <div class="pull-right btn-outer">
                	<a href="inventory-2.html" class="theme-btn btn-style-two">去买车 <span class="fa fa-caret-right"></span></a>
                </div>
            </div>
            <div class="row clearfix">
           
                <div class="comparison-block col-md-6 col-sm-12 col-xs-12">
                	<div class="inner-box">
                    	<a href="vehicle-compare-2.html" class="overlay-link"></a>
                    	<div class="vs">Vs</div>
                    	<div class="clearfix">
                        	<div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-9.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">阿库拉路克斯2015 SE</div>
                                        <div class="price">￥78900</div>
                                        <div class="overlay-text">阿库拉路克斯2015 SE</div>
                                    </div>
                                </div>
                            </div>
                            <div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-10.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">丰田凯美瑞2016</div>
                                        <div class="price">￥84500</div>
                                        <div class="overlay-text">丰田凯美瑞2016</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="comparison-block col-md-6 col-sm-12 col-xs-12">
                	<div class="inner-box">
                    	<a href="vehicle-compare-2.html" class="overlay-link"></a>
                    	<div class="vs">Vs</div>
                    	<div class="clearfix">
                        	<div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-11.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">阿库拉路克斯2015 SE</div>
                                        <div class="price">￥78900</div>
                                        <div class="overlay-text">阿库拉路克斯2015 SE</div>
                                    </div>
                                </div>
                            </div>
                            <div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-12.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">丰田凯美瑞2016</div>
                                        <div class="price">￥84500</div>
                                        <div class="overlay-text">丰田凯美瑞2016</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="comparison-block col-md-6 col-sm-12 col-xs-12">
                	<div class="inner-box">
                    	<a href="vehicle-compare-2.html" class="overlay-link"></a>
                    	<div class="vs">Vs</div>
                    	<div class="clearfix">
                        	<div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-12.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">阿库拉路克斯2015 SE</div>
                                        <div class="price">￥78900</div>
                                        <div class="overlay-text">阿库拉路克斯2015 SE</div>
                                    </div>
                                </div>
                            </div>
                            <div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-13.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">丰田凯美瑞2016</div>
                                        <div class="price">￥84500</div>
                                        <div class="overlay-text">丰田凯美瑞2016</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="comparison-block col-md-6 col-sm-12 col-xs-12">
                	<div class="inner-box">
                    	<a href="vehicle-compare-2.html" class="overlay-link"></a>
                    	<div class="vs">Vs</div>
                    	<div class="clearfix">
                        	<div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-14.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">阿库拉路克斯2015 SE</div>
                                        <div class="price">￥78900</div>
                                        <div class="overlay-text">阿库拉路克斯2015 SE</div>
                                    </div>
                                </div>
                            </div>
                            <div class="inner-car-block col-md-6 col-sm-6 col-xs-12">
                            	<div class="inner">
                                	<div class="image">
                                    	<img src="/boot/images/resource/car-15.png" alt="" />
                                    </div>
                                    <div class="lower-box">
                                    	<div class="car-name">丰田凯美瑞2016</div>
                                        <div class="price">￥84500</div>
                                        <div class="overlay-text">丰田凯美瑞2016</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

     <section class="testimonial-section">
    	<div class="auto-container">
        	
            <div class="sec-title centered">
            	<h2>客户反馈</h2>
            </div>
            <div class="testimonial-carousel owl-carousel owl-theme">




                <c:forEach items="${talks}" var="talk">
            	<div class="testimonial-block">
                	<div class="inner-box">
                    	<div class="image">
                        	<img src="/boot/images/resource/author-1.jpg" alt="" />
                        </div>
                        <div class="quote-icon"><span class="icon flaticon-double-quotes"></span></div>
                        <div class="text">${talk.webOrderId}</div>
                        <div class="text">${talk.talkBody}</div>
                        <div class="lower-box clearfix">
                        	<div class="pull-left">
                            	<h3>${talk.userName}</h3>

                               <div class="text">${talk.talkBody}</div>
                            </div>
                            <div class="pull-right">
                            	<div class="rating">
                                	<span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="light fa fa-star-half-o"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                </c:forEach>























            </div>
        </div>
    </section>
</div>
<jsp:include page="footer.jsp" flush="true"></jsp:include>

</body>

<div class="scroll-to-top scroll-to-target" data-target="html"><span class="icon fa fa-angle-up"></span></div>

<script src="/boot/js/jquery.js"></script>
<script src="/boot/js/bootstrap.min.js"></script>

<script src="/boot/plugins/revolution/js/jquery.themepunch.revolution.min.js"></script>
<script src="/boot/plugins/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.video.min.js"></script>
<script src="/boot/js/main-slider-script.js"></script>

<script src="/boot/js/jquery-ui.js"></script>
<script src="/boot/js/jquery.fancybox.pack.js"></script>
<script src="/boot/js/jquery.fancybox-media.js"></script>
<script src="/boot/js/owl.js"></script>
<script src="/boot/js/appear.js"></script>
<script src="/boot/js/wow.js"></script>
<script src="/boot/js/main-slider-script.js"></script>
<script src="/boot/js/script.js"></script>

<script>

        // $(".like").click(function(){
        //     $(this).addClass("active");
        //     let likes = $(".like");
        //     likes.each(function () {
        //         if($(this).hasClass("active")){
        //             let like1 = $(this).text();
        //             alert(like1);
        //         }
        //
        //     })
        //
        //
        //     alert(like1);
        // })

        function detailz(pid) {
            alert(pid);
            // let x = pid. children().val()
            window.location= "/boot/carts/detailz?pid="+pid;

        }

        function addCarts(pid){
            $.post('/boot/carts/add',{"pid":pid},function(data) {
                console.log(data);
                if (data.code == "200") {
                    // alert("1111");
                    alert("加入购物车成功");
                }
                if(data.code == "405")
                {
                    alert("加入购物车失败请先登录");
                }
                if(data.code == "402")
                {
                    alert("登录出错");
                }


            })
        }



        function like(obj,likes,this1) {
           // console.log(this1);
           this1. children().val(likes+1)
          $.post('/boot/user/addlike',{"id":obj},function (data) {
              if(data != null){
                  alert("点赞成功");
              }
          })
          //   window.location="/boot/user/addlike?id="+id;

        }


    // $(function () {
    //
    //     $("#likes").click(function () {
    //
    //         alert("11111");
    //         let likes = $("#likes").val();
    //         alert(likes);
    //
    //         $.post('/boot/user/index',null,function (data) {
    //
    //             if(data.code=="200")
    //             {
    //                 alert("点赞成功");
    //             }
    //
    //         })
    //
    //     })
    //
    // })




    function nextPage(pageNow){
        // let value = document.getElementById("brand").value;

        // let select_type = document.getElementById("select_type");
        // let typeId="-1"
        // let minPrice="0";
        // if(select_type!=null){
        //     typeId = select_type.value;
        // }

        // let min_price = document.getElementById("min_price");
        // if(min_price!=null){
        //     minPrice = min_price.value;
        // }
        window.location="/boot/user/index?pageNow="+pageNow;
            //+"&searchName="+value;
        // +"&typeId="+typeId+"&count=1&minPrice="+minPrice;
    }
</script>

</html>
